import  React, { useEffect, useState } from 'react'
import { View, Image } from '@tarojs/components'
import './index.scss'

// 属性数据类型
type MODEL_DATA_ITEM ={
  id: string,
  label: string,
  value: string
}

type MODEL = {
  data: MODEL_DATA_ITEM[],
  label: string,
  type: string,
  value: string
}
type ATTRS_CHILD = {
  model: MODEL,
  max: MODEL,
  type: MODEL
}
type ATTRS = {
  label: string,
  type: string,
  child: ATTRS_CHILD
}
// 样式数据类型
type STYLE_CHILD = {
  cmpBackground: VALUE,
  cmpLowerPadding: VALUE,
  cmpLowerRadius: VALUE,
  cmpUpperPadding: VALUE,
  cmpUpperRadius: VALUE,
  fontSize: VALUE,
  imgPadding: VALUE,
  imgRadius: VALUE,
  imgWidth: VALUE,
  pagePadding: VALUE,
  titleColor: VALUE,
}
type STYLE = {
  label: string,
  type: string,
  child: STYLE_CHILD
}
// 值的数据类型
type VALUE = {
  label: string,
  type: string,
  value: string | number
}
// type
type LIST_CHILD = {
  image:  VALUE,
  jump:  VALUE,
  label: VALUE
}

type LIST_VALUE = {
  child: LIST_CHILD,
  label: string,
  type: string,
  value: LIST_IMG[],
}

type LIST_IMG = {
  id: string,
  label: string,
  image: string
}

interface Props {
  attrs: ATTRS;
  styles: STYLE;
  list: LIST_VALUE;
};


// 做一个数据个映射
const styleTable = {
  pagePadding: "padding",
  cmpUpperPadding: "paddingTop",
  cmpLowerPadding: "paddingBottom",
  cmpBackground: "backgroundColor",
  cmpUpperRadius: "cmpUpperRadius",
  cmpLowerRadius: "cmpLowerRadius"
}

const imgTable = {
  "imgWidth": "width",
  "imgRadius": "imgRadius", 
  "fontSize": "fontSize",
  "titleColor": "color"
}
const imgArr= [
  "imgWidth",
  "imgRadius", 
  "fontSize",
  "titleColor"
]


const HeTitle = (props: Props) => {
  const {attrs, styles, list} = props;
  const [comStyle, setComStyle] = useState({});
  const [comImgStyle, setImgStyle] = useState({}); 
  const [comTxtStyle, setTxtStyle] = useState({});
  const [comItemStyle, setItemStyle] = useState({});
  // 1、图文  2、图  3、文
  const [imgType, setImgType] = useState(1)
  const handleStyle = (child, attrChild) => {
    let objCom = {};
    let objImg = {};
    let objTxt = {};
    let objItem = {
      width: "25%"
    };

    let objMax = {
      3: "125px",
      4: "93.75px",
      5: "75px",
    }

    for (let key in child) {
      const element = child[key];
      if(imgArr.indexOf(key)> -1) {
        if(key == "titleColor"){
          objTxt[imgTable[key]] = element.value;
        } 
        else if(key == "fontSize" ){
          objTxt[imgTable[key]] = element.value + "px";
        } 
        else if(key == "imgRadius" ){
          objImg["borderRadius"] = element.value + "px";
        } 
        else if(key == "imgWidth" ){
          objImg[imgTable[key]] = element.value + "px";
          objImg["height"] = element.value + "px";
        } 
      }
      
      else if( styleTable[key] == 'backgroundColor') {
        objCom[styleTable[key]] = element.value;
      } 
      else if (key == 'cmpUpperRadius') {
        objCom["borderTopLeftRadius"] = element.value + 'px'
        objCom["borderTopRightRadius"] = element.value + 'px'
      }else if (key == 'cmpLowerRadius') {
        objCom["borderBottomLeftRadius"] = element.value + 'px'
        objCom["borderBottomRightRadius"] = element.value + 'px'
      }else {
        objCom[styleTable[key]] = element.value + 'px'
      }
    }

    if(attrChild) {
      const {model, max, type} = attrChild
    
      if(type.value == "image-text") {
        setImgType(1)
      }
      if(type.value == "text") {
        setImgType(3)
      }
      if(type.value == "image") {
        setImgType(2)
      }
      
      if(max?.value) {
        objItem.width = objMax[max?.value]
        setItemStyle(objItem);
      }

      if(model?.value) {
        if(model?.value == "fixed") {
          objCom["overflowX"] = "hidden"
        }
        if(model?.value == "scroll") {
          objCom["overflowX"] = "auto"
        }
      }

    }
    return {objCom, objImg, objTxt};
  }
  useEffect(() => {
    let {objCom, objImg, objTxt} = handleStyle(styles?.child, attrs?.child);
    setComStyle(objCom) 
    setImgStyle(objImg) 
    setTxtStyle(objTxt)
  }, [attrs?.child, styles]);

  return (
    <View className='he-nav-all' style={comStyle}>
      <View className='he-nav-all-list'>
        {list?.value?.map(item => (
          <View style={comItemStyle} className='nav-item' key={item.id}>
            {imgType== 1 || imgType== 2 ?<Image className='nav-img' style={comImgStyle} src={item.image}></Image> : null}
            {imgType== 1 || imgType== 3 ?<View className='nav-txt' style={comTxtStyle}>{item.label}</View> : null}
          </View>
        ))}
      </View>
    </View>
  )
}

export default HeTitle;